class Cart {
    constructor() {
        this.bd = document.querySelector(".bd");
        this.url = "http://localhost:3000/data/data.json";
        this.load()
        this.addEvent();
    }
    addEvent() {
        const that = this;
        this.bd.addEventListener("input", function (eve) {
            const e = eve || window.event;
            const tar = e.target || e.srcElement;
            if (tar.className === "setNum") {
                that.id = tar.parentNode.parentNode.getAttribute("index")
                that.num = tar.value - 0;
                that.setCookie(function (i) {
                    that.goodsMsg[i].num = that.num;
                })
            }
        })

        this.bd.addEventListener("click", function (eve) {
            const e = eve || window.event;
            const tar = e.target || e.srcElement;
            if (tar.className === "check") {
                that.id = tar.parentNode.parentNode.getAttribute("index");
                that.chek = tar.checked;
                that.setCookie(function (i) {
                    that.goodsMsg[i].chek = that.chek
                })
            }
        })

        this.bd.addEventListener("click", function (eve) {
            const e = eve || window.event;
            const tar = e.target || e.srcElement;
            if (tar.className === "delBtn") {
                that.id = tar.parentNode.parentNode.getAttribute("index");
                tar.parentNode.parentNode.remove()
                that.setCookie(function (i) {
                    that.goodsMsg.splice(i, 1)
                })
            }
        })
    }
    setCookie(cb) {
        let i = 0;
        this.goodsMsg.some((val, idx) => {
            i = idx;
            return val.proId === this.id
        })
        cb(i);
        setCookie("goodsMsg", JSON.stringify(this.goodsMsg))
    }
    load() {
        ajax({
            url: this.url,
            success: (res) => {
                this.res = JSON.parse(res);
                this.getCookie();
            }
        })
    }
    getCookie() {
        this.goodsMsg = getCookie("goodsMsg") ? JSON.parse(getCookie("goodsMsg")) : []
        this.render()
    }
    render() {
        const that = this;
        let str = "";
        for (let i = 0; i < this.res.length; i++) {
            for (let j = 0; j < this.goodsMsg.length; j++) {
                if (this.res[i].proId === this.goodsMsg[j].proId) {

                    str += `<ul class="order_list" index="${this.res[i].proId}">
                    <li class="selecter">
                        <input type="checkbox" id="check" class="check">
                    </li>
                    <li class="img_box">
                        <a href="">
                            <img src="${this.res[i].url}" alt="">
                        </a>
                    </li>
                    <li class="product">
                        <a href="">
                            <span>${this.res[i].product_name}</span>
                        </a>
                    </li>
                    <li class="order_price">
                        <span>￥</span>
                        <span>${this.res[i].price}</span>
                    </li>
                    <li class="num">
                        <input type="number" class="setNum" value="${this.goodsMsg[j].num}" min=1>
                    </li>
                    <li class="sub">
                        ${this.res[i].price * this.goodsMsg[j].num}
                    </li>
                    <li class="operate">
                        <a href="#" class="delBtn">删除</a>
                    </li>
                </ul>`
                }
            }
        }
        this.bd.innerHTML = str;
        this.check = document.querySelectorAll(".check");
        this.AllCk = document.querySelector("#allFlag");
        let flag = false;
        for (let i = 0; i < this.check.length; i++) {
            this.check[i].onclick = function () {
                flag = Array.from(that.check).every(function (val) {
                    return val.checked === true;
                });
                if (flag) {
                    that.AllCk.checked = true;
                } else {
                    that.AllCk.checked = false;
                }
            }
        }
        this.AllCk.onclick = function () {
            if (that.AllCk.checked === true) {
                for (let p = 0; p < that.check.length; p++) {
                    that.check[p].checked = true;
                }
            } else {
                for (let p = 0; p < that.check.length; p++) {
                    that.check[p].checked = false;
                }
            }
        }
    }
}


new Cart;